<template>
  <div class="layout">
    <Layout>
      <div class="echarts-box echarts-box-h">
        <span><a href="./index">web music</a></span>
        <div style="right: 10px; position: absolute; color: white; display: flex">
          <el-avatar :size="40"
                     style="margin-top: 6px"
                     :src="avatar"></el-avatar>
          <el-dropdown split-button
                       type="success"
                       @command="handleCommand"
                       style="margin-left: 15px; margin-top: 5px">
            {{ userName }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="exit">退出</el-dropdown-item>
              <el-dropdown-item command="play">播放</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </Layout>

    <div>
      <el-container style="border: 1px solid #eee">
        <el-aside width="200px"
                  style="background-color: rgb(238, 241, 246)">
          <el-menu default-active="musicData"
                   background-color="#545c64"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   :collapse="isCollapse"
                   :router="true">
            <el-menu-item index="musicData">每日看板</el-menu-item>

            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>数据管理</template>
              <el-menu-item-group>
                <el-menu-item index="">选项1</el-menu-item>
                <el-menu-item index="">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"><i class="el-icon-message"></i>同步管理</template>
              <el-menu-item-group>
                <el-menu-item index="">选项1</el-menu-item>
                <el-menu-item index="">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title"><i class="el-icon-message"></i>音乐管理</template>
              <el-menu-item-group>
                <el-menu-item index="allArtist">演唱家</el-menu-item>
                <el-menu-item index="allMusic">海量歌曲</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title"><i class="el-icon-message"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="userList">用户列表</el-menu-item>
                <el-menu-item index="">选项2</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title"><i class="el-icon-message"></i>个人设置</template>
              <el-menu-item-group>
                <el-menu-item index="userSetting">我的</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
      <Footer class="layout-footer-center">2024 &copy; 某人李</Footer>
    </div>
  </div>
</template>
<script>
// import router from '@/router'
// import { MenuItem } from 'iview'
export default {
  components: {
    // MenuItem: MenuItem
  },
  data() {
    return {
      isCollapse: false,
      userName: '',
      avatar: '',
    }
  },
  mounted() {
    if (this.$store.state.user == null) {
      this.$router.push('/login')
    } else {
      const user = JSON.parse(this.$store.state.user)
      this.userName = user.userName
      this.avatar = user.avatar
    }
  },
  methods: {
    handleCommand(command) {
      if (command == 'exit') {
        this.$store.commit('DEL_USER')
        this.$router.push('/login')
        this.$message.success('退出登录')
      }
    },
  },
}
</script>

<style scoped>
.echarts-box {
  /* border: 0.1px solid #00F6FF;
   */
  margin-bottom: 5px;
}

.echarts-box-h {
  /* height: 80px; */
  background-color: rgba(1, 13, 58, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 20px;
}

.el-submenu-layout {
  /* margin-left: -50px; */
}

.echarts-box span {
  color: white;
  font-size: 40px;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}

.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}

.layout-footer-center {
  text-align: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.main {
  margin-top: -20px;
}
</style>
